<template>
  <div class="html">
    <div class="header">
      <router-link to="/Yiyuan"> <span>&lt;</span> </router-link>
      <span> x </span>
      <span>【中国移动】【移动商...</span>
     <div class="fenxiang"><Sku /></div>
    </div>
    <div class="lunbo"><Xiangqinglunbo /></div>
    <div class="money">
      <h2>￥ 5599-7999</h2>
      <span class="yj">原价：<s>5599</s>起</span>
      <span class="ys">已售:4789件</span>
    </div>

    <div class="lanmu">
      <div class="lanmus">
        <span class="zheng"><span class="zheng1">正</span>成品保证</span>
        <span class="mian"><span class="mian1">免</span>免费送货</span>
      </div>
      <div class="lanmuz"><h3>【移动商城5G金币】 iPhone 13</h3></div>
      <div class="lanmux">
        请您注意接听客服来电，以便安排发货。承诺保底消费，且在网24个月，5G金币购机至高优惠4000元!
      </div>
    </div>
    <div class="choose">
      <div class="choose1">
        <span>选择&nbsp;&nbsp;&nbsp;&nbsp;5G金币购机直降午夜色128GB公开版</span>
      </div>
      <div class="choose2">></div>
    </div>
    <div class="shanghu">
      <div class="shanghus">
        <div><span>商户</span> <span>终端公司</span></div>
        <div><span class="iconfont icon-31dianhua" id="dianhua"></span></div>
      </div>
      <div class="shanghux">
        <span>配送范围</span>
        &nbsp;<span>全国(港澳台除外)</span>
      </div>
    </div>
    <div class="pingjia">
      <div class="pingjias">
        <div>综合评分<br />4.21</div>
        <div>商品评价<br />4.08</div>
        <div>服务态度<br />4.19</div>
        <div>物流服务<br />4.37</div>
      </div>
      <div class="pingjiax">
        <div>评价（0）</div>
        <div>好评度100%</div>
      </div>
    </div>
    <div class="xiangqing">
      <div class="xiangqingheader">详情</div>
      <div class="xiangqingdaohang">
        <span>商品介绍</span>
        <span>活动介绍</span>
      </div>
      <div class="xingqingtext"> 
        正常情况下按订单支付顺序陆续安排发货，如遇缺货时将按货源到货情况分批次完成发货;部分地区由于受疫情影响，无法正常发货配送，将会取消订单发货资格，部分地区顺丰无法揽件的，将改发其他快递，敬请谅解!祝您购物愉快!
      </div>
      <div class="imgs">
        <img src="img/liuimg/datu.jpg" alt="">
      </div>
    </div>
    <div class="rubbish"></div>
    <ShangchengBottom />
  </div>
</template>

<script>
import Xiangqinglunbo from "@/components/liu/Xiangqinglunbo.vue";
import Sku from "@/components/liu/Sku.vue";
export default {
  components: {
    Xiangqinglunbo,Sku,
  },
};

</script>

<style>
.html {
  background-color: white;
  height: 100%;
}
.header {
  font-size: 0.25rem;
  height: 0.3rem;
  background-color: white;
}
.fenxiang {
  font-size: 0.25rem;
  float: right;
  line-height: 0.4rem;
}
.lunbo img {
  width: 3.96rem;
  height: 3.96rem;
}
.money {
  display: flex;
  height: 0.3rem;

  background-color: white;
}
.money h2 {
  color: #e40178;
}
.yj {
  font-size: 0.1rem;
  color: gray;
  margin-top: 0.1rem;
}
.ys {
  font-size: 0.16rem;
  color: gray;
  margin-top: 0.05rem;
  margin-left: 0.6rem;
}
.zheng {
  width: 0.2rem;
  background-color: #e40178;
  border-radius: 0.1rem;
  color: white;
  font-size: 0.12rem;
}
.zheng1 {
  border: 1px solid white;
  border-radius: 50%;
}
.mian {
  width: 0.2rem;
  background-color: #e40178;
  border-radius: 0.1rem;
  color: white;
  font-size: 0.12rem;
}
.mian1 {
  border: 1px solid white;
  border-radius: 50%;
}
.lanmux {
  color: #e40178;
}
.lanmu {

  background-color: white;
}
.choose {
  height: 0.5rem;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.choose1 {
  line-height: 0.5rem;
  color: gray;
}
.choose2 {
  line-height: 0.5rem;
}
#dianhua {
  color: skyblue;
}
.shanghu {
  background-color: white;
  margin-top: 0.1rem;
}
.shanghus {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
  border-bottom: 1px gray solid;
}.shanghux{
  border-bottom: 1px solid gray;
}
.rubbish {
  height: 3rem;
  width: 100%;
}
.pingjia {
  background-color: white;
  margin-top: 0.1rem;
  overflow: hidden;
}
.pingjias {
  width: 3.2rem;
  height: 0.6rem;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  text-align: center;
  background-color: #f3f8fc;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
}
.pingjias div {
  margin-top: 0.1rem;
}
.pingjiax {
  display: flex;
  margin-top: 0.1rem;
  justify-content: space-between;
  border-bottom: 1px solid gray;
}
.xiangqing {
  width: 100%;
  min-height: 2rem;
  margin-top: 0.1rem;
  background-color: white;
}
.xiangqingheader {
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.2rem;
  border-bottom: 1px dashed #dfdfdf;
}
.xiangqingdaohang {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #dfdfdf;
  margin-top: .1rem;
}
.xingqingtext{
  color: red;
}
.xiangqingdaohang span:hover {
  color: black;
  border-bottom: blue solid 3px;
}
.imgs img{
  width: 100%;
  
}
</style>